<template>
  <div class="list-page-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item  style="cursor: pointer" >列表页</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 商品列表 -->
    <div class="product-list">
      <div class="product-item" v-for="(product, index) in products" :key="index" @click="goToGoodsDetail(product.name)">
        <div class="product-wrapper">
          <img :src="product.image" :alt="product.name" class="product-image">
          <div class="product-info">
            <p class="product-price">¥{{ product.price }}</p>
            <p class="product-description">{{ product.description }}</p>
            <p class="product-reviews"><span class="abc">
                {{ product.reviews }}</span>条评论</p>
          </div>
          <div class="product-buttons">
            <el-button class="er" type="danger" style="width: 250px;">收藏</el-button>
            <el-button class="er" type="danger" style="width: 250px;">评论</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    return { router };
  },
  created() {
    // 使用 this.$route.query 获取查询参数, 并向服务器请求数据
    const {category, subCategory} = this.$route.query;
    console.log(subCategory)
    this.getGoodSListByName(subCategory);
  },
  //  根据商品的名字获取信息，如电脑就显示电脑的列表

  methods: {
    goToGoodsDetail(name) {
      this.router.push({ path: '/GoodsDetail', query: { name: name } });
    },
    getGoodSListByName(goodName) {
      api.get("/api/getGoodsByName", {params: {"goodsName": goodName}}).then(
          res => {
            this.products = res.serverData;
            console.log(" 根据", goodName)
            console.log(" this.products", this.products)
          }
      )
    }
  }
  ,

  name: "ListPage",
  data() {
    return {
      products: []
    };
  }
};
</script>

<style scoped>
.list-page-container {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.product-item {
  width: 23%; /* 修改宽度为23% */
  margin: 10px; /* 添加外边距 */
}

.product-wrapper {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保高度一致 */
}

.product-image {
  width: 100%;
  height: 100%; /* 缩小图片高度 */
  object-fit: cover;
}

.abc {
  color: rgb(162, 212, 241);
  font-weight: bold;
}

.product-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left; /* 文字靠左对齐 */
}

.product-price {
  color: red;
  font-weight: bold;
  font-size: 16px;
  margin: 0;
}

.product-description {
  font-size: 14px;
  margin: 5px 0;
}

.product-reviews {
  font-size: 12px;
  color: #999;
  margin: 5px 0;
}

.product-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.el-button--mini {
  padding: 5px 10px;
}

.product-buttons > .er {
  margin: 1px;
}
</style>